<template>
  <div class="addoredit">
    <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="180px" class="demo-ruleForm">
      <el-form-item label="展示APP：" prop="checkList">
        <el-checkbox-group v-model="ruleForm.checkList">
          <el-checkbox label="0">经纪人端</el-checkbox>
          <el-checkbox label="1">好房端</el-checkbox>
          <el-checkbox label="2">管家端</el-checkbox>
        </el-checkbox-group>
      </el-form-item>
      <el-form-item label="链接地址：">
        <el-input v-model.trim="ruleForm.address" placeholder="请输入链接地址" style="width:300px;"></el-input>
      </el-form-item>
      <el-form-item label="iphone配置图：" prop="banner1">
        <uploadImg @uploadSuccess="uploadSuccess1" v-model="ruleForm.banner1"></uploadImg>
        <p>限制数量1，格式为jpg、png，建议1242*2208px</p>
      </el-form-item>
      <el-form-item label="iphoneX.MAX配置图：" prop="banner2">
        <uploadImg @uploadSuccess="uploadSuccess2" v-model="ruleForm.banner2"></uploadImg>
        <p>限制数量1，格式为jpg、png，建议1242*2688px</p>
      </el-form-item>
      <el-form-item label="Android配置图：" prop="banner3">
        <uploadImg @uploadSuccess="uploadSuccess3" v-model="ruleForm.banner3"></uploadImg>
        <p>限制数量1，格式为jpg、png，建议1080*1920px</p>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="create(1)">{{type=="add"?"新建":"保存"}}</el-button>
        <el-button type="primary" @click="create(2)">{{type=="add"?"新建":"保存"}}并启用</el-button>
        <el-button type="primary" @click="cancel">取消</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
import uploadImg from "../common/uploadImg"
import api from '@/api/apiPath'
export default {
  data() {
    return {
      type: this.$route.query.type,
      editid: "",
      appImg:[],
      ruleForm: {
        checkList: ["0","1","2"],
        address: "",
        banner1: "",
        banner2: "",
        banner3: ""
      },
      rules: {
        checkList: [
          { required: true, message: '至少选择一个展示在APP', trigger: 'change' }
        ],
        banner1: [{
          required: true,
          validator: (rule, value, callback) => {
            if (this.ruleForm.banner1 == "") {
              return callback(new Error('请上传iphone配置图'));
            }
            callback();
          }
        }],
        banner2: [{
          required: true,
          validator: (rule, value, callback) => {
            if (this.ruleForm.banner2 == "") {
              return callback(new Error('请上传iphoneX.MAX配置图'));
            }
            callback();
          }
        }],
        banner3: [{
          required: true,
          validator: (rule, value, callback) => {
            if (this.ruleForm.banner3 == "") {
              return callback(new Error('请上传Android配置图'));
            }
            callback();
          }
        }]
      }
    }
  },
  methods: {
    warn(msg) {
      this.$alert(msg, '提示', {
        type: 'error',
        confirmButtonText: '确定',
        callback: action => {}
      });
    },
    uploadSuccess1(res) {
      this.ruleForm.banner1 = res;
    },
    uploadSuccess2(res) {
      this.ruleForm.banner2 = res;
    },
    uploadSuccess3(res) {
      this.ruleForm.banner3 = res;
    },
    cancel() {
      this.$router.push({
        path: "/splashscreen"
      })
    },
    create(atype) {
      this.$refs.ruleForm.validate(valiid => {
        if (!valiid) {
          return;
        }
        if(this.ruleForm.address != "" ){
          let reg=/(http|ftp|https):\/\/[\w\-_]+(\.[\w\-_]+)+([\w\-\.,@?^=%&:/~\+#]*[\w\-\@?^=%&/~\+#])?/;
          if(!reg.test(this.ruleForm.address)){
            this.$message({
              showClose: true,
              message: '请输入正确的链接地址',
              type: 'waring',
              onClose:()=>{
                  
              }
            });
            return
          }
        }
        let params = {};
        let tempAppName = [];
        params.linkAddress = this.ruleForm.address;
        // params.iphoneImage = this.ruleForm.banner1;
        // params.iphonexImage = this.ruleForm.banner2;
        // params.androidImage = this.ruleForm.banner3;
        params.appImg=[
          {name:0,url:this.ruleForm.banner1},
          {name:1,url:this.ruleForm.banner2},
          {name:2,url:this.ruleForm.banner3}
        ]
        if (atype == 1) {
          params.executionStatus = 1;
          params.enableStatus = 1;
        } else {
          params.executionStatus = 0;
          params.enableStatus = 0;
        }
        for (let i = 0; i < this.ruleForm.checkList.length; i++) {
          if (this.ruleForm.checkList[i] == 0) {
            tempAppName.push("经纪人端")
          }
          if (this.ruleForm.checkList[i] == 1) {
            tempAppName.push("好房端")
          }
          if (this.ruleForm.checkList[i] == 2) {
            tempAppName.push("管家端")
          }
        }
        params.appName = tempAppName.join("、");
        params.appType = this.ruleForm.checkList.join("、");
        if (this.type == "add") {
          this.axios.post(api.addSplashScreen, params).then((res) => {
            if (res.data.code == 200 && res.data.data) {
              this.warn(res.data.data)
            } else {
              this.$alert("操作成功", '提示', {
                type: 'success',
                confirmButtonText: '确定',
                callback: action => {
                  this.$router.push({
                    path: "/splashscreen"
                  })
                }
              });
            }
          })
        } else {
          params.id = this.editid;
          this.axios.post(api.updateSplashScreen, params).then((res) => {
            console.log(res.data);
            if (res.data.code == 200 && res.data.data) {
              this.warn(res.data.data)
            } else {
              this.$alert("操作成功", '提示', {
                type: 'success',
                confirmButtonText: '确定',
                callback: action => {
                  this.$router.push({
                    path: "/splashscreen"
                  })
                }
              });
            }
          })
        }
      })
    }
  },
  mounted() {
    if (this.type == "edit") {
      this.editid = this.$route.query.id;
      this.ruleForm.address = this.$route.query.linkAddress;
      this.ruleForm.checkList = this.$route.query.appType.split("、");
      this.appImg=this.$route.query.appImg;
      for(let i=0;i<this.appImg.length;i++){
        if(this.appImg[i].name==0){
          this.ruleForm.banner1=this.appImg[i].url
        }
        if(this.appImg[i].name==1){
          this.ruleForm.banner2=this.appImg[i].url
        }
        if(this.appImg[i].name==2){
          this.ruleForm.banner3=this.appImg[i].url
        }
      }
    }
  },
  components: {
    uploadImg
  }
}

</script>
<style lang="css" scoped>
</style>
